<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜单</title>
		<style>
				ul{
					list-style: none;/*去掉标签li中的点*/
				}
				li{
					float: left;/*li不换行*/
					margin-right: 10px;
					background-color: darkgray;
					padding: 5px;/*四周空白*/
					color: #FF7F50;/*字体颜色*/
					border-radius: 40px;
				}
				li:hover{
					background-color: chocolate;/*鼠标移入变色*/
				}
				a{
					text-decoration: none;/*取消超链接下面下划线，文字装饰*/
					color: antiquewhite;/*字体颜色*/
				}
		</style>
	</head>
	<body>
		
		<h2>使用ul和li标签实现，通过样式修饰实现</h2>
		
		<ul>
			<li><a href="https://www.w3school.com.cn/" target="_blank">W3Cshool</a></li>
			<li><a href="https://www.runoob.com/" target="_blank">菜鸟教程</a></li>
			<li><a href="https://www.csdn.net/" target="_blank">CSDN</a></li>
			<li><a href="https://segmentfault.com/" target="_blank">思否</a></li>
			<li><a href="https:////gy.tedu.cn//" target="_blank">JAVA培优</a></li>
			<li><a href="https://lol.qq.com/" target="_blank">LOL</a></li>
			<li><a href="https://www.huawei.com/" target="_blank">华为</a></li>
		</ul>
	</body>
</html>
